
<template>
    <div class="page-form page-sign-add">   
      <Form  ref="formValidate" :model="formItem" :rules="ruleValidate" style="width: 500px" :label-width="120">
          <FormItem prop="name" label="奖品名称：">
              <Input v-model="formItem.name" placeholder="请输入奖品名称"></Input>
          </FormItem>
          <FormItem prop="types" label="奖品类型：">
            <Select v-model="formItem.types" placeholder="请选择奖品类型" >                 
                 <Option v-for="item in typeList" :value="item.value" :key="item.value">{{ item.label }}</Option>      
            </Select>
          </FormItem>
          <FormItem prop="num" label="奖品数量：">
              <Input v-model="formItem.num" placeholder="请输入奖品数量"></Input>
          </FormItem>
      
          <FormItem>
              <Button type="primary" @click="handleSubmit('formValidate')">提交</Button>
              <Button type="ghost" @click="handleReset('formValidate')" style="margin-left: 8px">重置</Button>
          </FormItem>
      </Form>

    </div>
</template>

<script>
export default {
  data() {
    return {
      id: "",
      formItem: {
        name: "",
        num: "",
        types: null
      },
      typeList: [
        {
          label: "特等奖",
          value: "0"
        },
        {
          label: "一等奖",
          value: "1"
        },
        {
          label: "二等奖",
          value: "2"
        },
        {
          label: "三等奖",
          value: "3"
        },
        {
          label: "四等奖",
          value: "4"
        },
        {
          label: "参与奖",
          value: "5"
        }
      ],
      ruleValidate: {
        name: [
          {
            required: true,
            message: "奖品名称不能为空哦~",
            trigger: "blur"
          }
        ],
        types: [
          {
            required: true,
            message: "请选择奖品类型哦~",
            trigger: "change"
          }
        ],
        num: [
          {
            required: true,
            message: "请输入正确的奖品数量~",
            trigger: "blur"
          }
        ]
      }
    };
  },
  created() {
    var self = this;
    var id = this.$route.query.id;
    if (id != undefined) {
      self.id = id;
      this.init(id);
    }
  },
  methods: {
    init(id) {
      var self = this;
      // 定义请求
      var req = self.Axios.get(self.Interface.pirzeDetails + id);

      // 处理请求结果
      req.then(res => {
        var data = res.data;
        if (data.success) {
          self.formItem = {
            name: data.data.name,
            num: data.data.num + "",
            types: data.data.types + ""
          };
        } else {
          this.$Message.error(data.msg);
        }
      });
    },
    handleSubmit(name) {
      var self = this;

      this.$refs[name].validate(valid => {
        if (valid) {
          var data = {
            name: self.formItem.name,
            num: self.formItem.num * 1,
            types: self.formItem.types * 1
          };
          console.log(data);
          if (self.id) {
            data.id = self.id;
          }
          // 定义请求
          var req = self.Axios.post(self.Interface.prizeSave, data);

          // 处理请求结果
          req.then(res => {
            var data = res.data;
            if (self.id) {
              this.$Message.success("更新成功");
            } else {
              this.$Message.success("添加成功");
            }
            setTimeout(function() {
              self.$router.push({
                path: "/prize/list"
              });
            }, 1500);
          });
        } else {
          this.$Message.error("请完善您的奖品信息");
        }
      });
    },
    handleReset(name) {
      this.$refs[name].resetFields();
    }
  }
};
</script>

<style scoped lang="less">
.page-form {
  box-sizing: border-box;
  padding: 15px 0 0 0;
}
</style>